<template>
  <div>
    <!--  导航栏  -->
    <Header active="registry"/>

    <!--内容-->
    <div style="margin-top:60px;height:600px;">
      <h2>注册</h2>
      <el-divider></el-divider>
      <el-row type="flex" justify="left" align="middle">
        <el-col :offset="9" :span="6">
          <el-form label-width="70px" :model="formData" :rules="rules" ref="userForm">
            <el-form-item label="账号" prop="username">
              <el-input v-model="formData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" type="email"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="kaptcha">
              <el-row>
                <el-col :span="14">
                  <el-input v-model="formData.kaptcha"></el-input>
                </el-col>
                <el-col :span="10">
                  <el-image src="/community/kaptcha"></el-image>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item style="text-align: left;">
              <el-button type="primary" @click="submitForm()">立即注册</el-button>
              <el-button @click="resetForm('userForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <!--  底栏  -->
    <Footer/>
  </div>
</template>

<script>
import Header from "@/views/Header";
import Footer from "@/views/Footer";

export default {
  name: "Registry",
  components: {Footer, Header},
  data() {
    return {
      formData: {},
      screenHeight: screen.availHeight / 2,
      rules: {
        username: [
          {required: true, message: '请输入行号'},
        ],
        password: [
          {required: true, message: '请输入密码'},
        ],
        email: [
          {required: true, message: '请输入邮箱'},
        ],
        kaptcha: [
          {required: true, message: '请输入验证码'},
        ]
      },
    }
  },
  methods: {
    submitForm() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          this.axios.post('/community/registry',
              this.formData).then((response) => {
            console.log(response);
            if (response.data.code === "00000") {
              this.$message.success({
                message: '注册成功,即将跳转到登录页!',
                duration: 2000,
                onClose: () => {
                  window.location.href = '/login'
                }
              });
            } else {
              this.$message.error(response.data.message);
            }
          }).catch((error) => {
            console.log(error);
          });
        }
      });
    },
    resetForm(ref) {
      this.$refs[ref].resetFields();
    },
  }
}
</script>

<style scoped>
el-tag {
  margin-left: 5px;
}
</style>
